// 引入组件懒加载组件
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 组件懒加载逻辑
export function useObserver (apiFn) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // 要监听哪个节点
    target,
    // 如果节点滚动的距离进入视口那么isIntersecting为true
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        // 如果这个组件进入视口在调用获取数据方法
        apiFn()
        // 获取完数据后要停止监听这个组件,否则就以但滚动就会发送请求
        stop()
      }
    },
    // 刚进入视口区域就立刻执行回调 0 - 1
    { threshold: 0.1 }
  )
  return {
    target
  }
}
